<template>
    <div>
        <wd-navbar
        title="订单详情"
        left-text=""
        left-arrow
        @click="backpath"
        style="
          position: fixed;
          top: 0;
          width: 100%;
          background-color: white;
          z-index: 9999;
        "
      >
        <template #right>
         
        </template>
      </wd-navbar>
     
    </div>
   
    <div style="width: 100%; height: 200rpx; margin: 100rpx auto 0 0;  text-align: center;">
       <h2><wd-icon name="time" size="22px" style="color:blue"></wd-icon> 商品准备中</h2>
       <div style="margin-top:25rpx">感谢使用omiga台社区</div>
    </div>
    <wd-notice-bar
    text="购物中心如果有问题，可以联系团长进行解决！购物中心如果有问题，可以联系团长进行解决！购物中心如果有问题，可以联系团长进行解决！"
    closable
  />
  <div style="width: 100%; height: auto; margin: 0 auto;  background-color: #f5f5f5; overflow: hidden;">
    <div style="width: 95%; height: 400rpx; background-color: white; margin: 10rpx auto;">
<h4 style="padding:40rpx">提货人：{{shopone[0].userid.name}}</h4>
<hr>
<h4 style="padding:40rpx">自提点 ：
 {{ shopone[0].userid.address[0].address1[0]}}
  </h4>
<div style="padding-left:40rpx">
  {{ shopone[0].userid.address[0].address1[0]}}{{ shopone[0].userid.address[0].address1[1]}}{{ shopone[0].userid.address[0].address1[2]}}
</div>
<hr>
<div style="display: flex; justify-content: space-between; padding: 40rpx; text-align: center;">
<div style="width:45%;text-align:center " >
  <wd-icon name="call" size="25px" ></wd-icon> 联系团长
</div>
<div style="width:45%;text-align:center ">
  <wd-icon name="help" size="25px"></wd-icon>导航前往
</div>
</div>
    </div>
    <div style="width:95%;height:260rpx;background-color:white;margin:20rpx auto;overflow: hidden;">
      <div style="display: flex;width: 100%; height: 100%; justify-content: space-between; padding: 20rpx;">
        <div>
          <img :src="shopone[0].goodsid.img" alt="" style="width: 200rpx; height: 200rpx; border-radius: 10rpx;">
        </div>
        <div>
          <span>{{shopone[0].goodsid.name}}</span><br>
          <span>单价：${{shopone[0].goodsid.price}}元</span><br>
          <span>数量：{{shopone[0].shopnum}}</span>
        </div>
        <div style="width: 38%;text-align: center;">
          实付款：${{parseFloat(shopone[0].shopnum*shopone[0].goodsid.price*shopone[0].goodsid.discount).toFixed(2)}}
          <div style="margin-top: 120rpx;">
            <wd-button type="primary" size="small" style="width: 45%;">再次购买</wd-button>
            <wd-button type="info" size="small" style="width: 45%;">去评价</wd-button>
          </div>
        </div>
        
      </div>
      
      
    </div>
    <div style="width: 95%; height: 400rpx; background-color: white; margin:10rpx auto;display: flex; flex-direction: column;justify-content: space-between; ">
      <div style="display:flex; justify-content: space-between; width:90%;padding-top: 20rpx 0; margin: 0 auto;">
        <div>优惠劵</div>
        <div style="color:#d81e06">-￥0</div>
      </div>
    
      <div style="display:flex; justify-content: space-between; width:90%;padding-top: 20rpx; margin: 0 auto;">
        <div>商品优惠</div>
        <div style="color:#d81e06">${{parseFloat(shopone[0].shopnum*shopone[0].goodsid.price*(1-shopone[0].goodsid.discount)).toFixed(2)}}</div>
      </div>
      <div style="display:flex; justify-content: space-between; width:90%;padding-top: 20rpx; margin: 0 auto;">
        <div>商品总额</div>
        <div style="color:#d81e06">${{parseFloat(shopone[0].shopnum*shopone[0].goodsid.price).toFixed(2)}}</div>
      </div>
      <div style="display:flex; justify-content: space-between; width:90%;padding-top: 20rpx; margin: 0 auto;">
        <div>实际支付</div>
        <div style="color:#d81e06">${{parseFloat(shopone[0].shopnum*shopone[0].goodsid.price*shopone[0].goodsid.discount).toFixed(2)}}</div>
      </div>
    </div>
    <div style="width: 95%; height: 100rpx; background-color: white;margin: 0 auto;">
      <span style="padding-left:30rpx ;">备注：暂无备注</span>
      </div>
      <div style="width: 95%; height: 200rpx; background-color: white; margin:20rpx auto;display: flex; flex-direction: column;justify-content: space-between;" >
        <div style="display:flex;justify-content: space-between; width:90%;padding-top: 20rpx; margin: 0 auto;">
          <div>订单号</div>
        <div style="color:gray">{{shopone[0]._id}}</div>
        </div>
        <div style="display:flex;justify-content: space-between; width:90%;padding-top: 20rpx; margin: 0 auto;">
          <div>下单时间</div>
        <div style="color:gray">{{dayjs(Number(shopone[0].buy_time)).format('YYYY-MM-DD HH:mm:ss')}}</div>
        </div>
      </div>
  </div>
  <div style="width:100% ;">
    <h2 style="text-align: center; font-size: 50rpx; font-weight: 500; margin: 20rpx 0;">为你推荐</h2>
  </div>
  <div>
    <view class="content" v-for="i in list.slice(0, rexiaohaohuo_num)" :key="i.id">
      <view class="one">
        <div class="img_src">
          <img :src="i.img" alt="" style="width: 100%; height: 100%;" />
        </div>
        <div class="shop_con">
          <div class="" style="width: 90%; color: gray; ">
            {{i.name}}
          </div>
          <div>
            <button
              style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

          </div>
          <div>
            <button
              style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
          </div>
          <div style="display: flex; justify-content: space-between; width: 95%;">
            <div>
              <span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
              <span
                style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
            </div>
            <div>
              <wd-button type="error" size="small">加入购物车</wd-button>
            </div>
          </div>
        </div>
      </view>
    </view>
    <wd-loadmore :state="rexiaohaohuo_state" @reload="loadmore" />
  </div>
  <div>
   
  </div>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, onMounted, reactive, ref } from 'vue';
import { useshopcar } from '@/store/shopcar.ts'; //获取store
import { dayjs } from 'wot-design-uni';
import { storeToRefs } from 'pinia';


const shopcar = useshopcar();
const { shopcarlist } = storeToRefs(shopcar);
console.log(shopcarlist.value);

const backpath = () => {
  uni.navigateBack({
    delta: 1,
  });
};
onShow(() => {
  
 
  
});
const shop_id=ref('')
const shop_con=reactive({})
onLoad((option) => {
 shop_id.value=option._id
// console.log(shop_id.value);


});

onMounted(() => {

})

const shopone=computed(()=>{
  
  return shopcarlist.value.filter((item:any)=>item._id==JSON.parse(shop_id.value))
})

import { useMainStore } from '@/store/index';
const userinfo = useMainStore();

const { list } = storeToRefs(userinfo);
const rexiaohaohuo_state = ref<string>('loading');
const rexiaohaohuo_num = ref<number>(2);
const rexiaohaohuo_max = ref<number>(
  list.value.filter((i) => i.discount !== 0).length,
);
onReachBottom(() => {
  if (rexiaohaohuo_num.value === rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'error';
  } else if (rexiaohaohuo_num.value < rexiaohaohuo_max.value) {
    loadmore();
  } else if (rexiaohaohuo_num.value >= rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'finished';
  }
});
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad(() => {
  loadmore();
});
function loadmore() {
  let a = setInterval(() => {
    rexiaohaohuo_num.value = rexiaohaohuo_num.value + 2;
    rexiaohaohuo_state.value = 'loading';
    if (rexiaohaohuo_num.value >= rexiaohaohuo_max.value) {
      rexiaohaohuo_state.value = 'finished';
      clearInterval(a);
    }
  }, 2000);
}



</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 300rpx;
  margin: 0 auto;
  background-color: #f0f0f0;

  .one {
    width: 95%;
    height: 300rpx;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-around;

    .img_src {
      width: 30%;
      height: 90%;

      margin: auto;
    }

    .shop_con {
      width: 65%;
      height: 90%;
      margin: auto;

    }
  }
}
</style>